<template>
  <div>
    <a-spin tip="Loading..." :spinning="spain">
      <div class="content-top">
        <div class="content-top-box" v-for="(item,index) in dataLists" :key="index">
          <div>
            <img
              :src="item.pressureUp ? require('../../../assets/img/pressure.png') : require('../../../assets/icon-12.png')">
          </div>
          <div class="top-right">
            <h3 :class="{'red' :item.pressureUp}">{{ item.deviceValue.substring(0, 5) }}<span>mpa</span></h3>
            <p>
              {{ item.nickname }}
            </p>
          </div>
          <div v-show="item.pressureUp">
            <img src="../../../assets/img/pressureUp.png">
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <a-row style="padding: 20px;box-sizing: border-box">
          <a-col :span="12">
            <a-range-picker style="margin-right: 15px" @change="onChange"/>
            <a-button type="primary" @click="search" style="background: #3C67F1;border: none;width: 114px;height: 32px">
              查询
            </a-button>
          </a-col>
          <a-col :span="12" style="text-align: right">
            <a-button @click="abnormalBtn" style="border-color: #3C67F1;color: #3C67F1;margin-right: 15px">异常报告
            </a-button>
            <a-button @click="thresholdBtn" style="border-color: #3C67F1;color: #3C67F1;">阈值设置</a-button>
          </a-col>
          <a-col :span="24" style="text-align: right;margin-top: 20px;">
        <span class="ststus">
          <img src="../../../assets/icon/yc.png"/>
          异常
        </span>
            <span class="ststus">
          <img src="../../../assets/icon/zc.png"/>
          正常
        </span>
          </a-col>
          <a-col :span="24" style="margin-top: 20px;">
            <a-table :pagination="false" :rowKey="(record,index)=>{return index}" style="display:block;"
                     :data-source="list" bordered :columns="columns">
                 <span slot="indexRender" slot-scope="record, index, indent, expanded">
                    {{ indent + 1 }}
                  </span>
              <span slot="status" slot-scope="record, index, indent, expanded">
                        {{ indent == 1 ? '正常' : '异常' }}
                 </span>
            </a-table>
            <div style="text-align: right;margin-top: 30px">
              <a-pagination @change="onShowSizeChange" v-model="pageNo" :total="total" show-less-items/>
            </div>
          </a-col>
        </a-row>
      </div>
      <a-modal
        width="50%"
        v-model="threshold"
        title="阈值设置"
        centered
        @ok="thresholdOk"
      >
        <div style="display: flex;align-items: center;justify-content: center;margin: 20px 0">
          <div style="margin-right: 20px">管网压力</div>
          <a-input type="number" v-model="min" style="width: 40%" placeholder="最低阀值"/>
          <span style="margin: 0 10px">~</span>
          <a-input type="number" v-model="max" style="width: 40%" placeholder="最高阀值"/>
        </div>
      </a-modal>
      <abnormal ref="abnormal"></abnormal>
    </a-spin>
  </div>
</template>

<script>
import abnormal from './abnormal'
import {fabrThreshold, fabrThresholdList, fabrThresholdEdit, pipeNetworkList, fabrPipeNetwork} from '@/api/device'
import {pageList} from "@api/meteorological";

export default {
  data() {
    return {
      spain: true,
      yearShowOne: false,
      yearQuarter: '',
      dateCOl: true,
      threshold: false,
      dateCOls: false,
      startDate: '',
      endDate: '',
      min: '',
      max: '',
      id: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          scopedSlots: {customRender: 'indexRender'}
        },
        {
          title: '名称',
          dataIndex: 'deviceName',
        },
        {
          title: '压力（mpa）',
          dataIndex: 'numVal',
        },
        {
          title: '阈值范围',
          dataIndex: 'threshold',
        },
        {
          title: '预警状态',
          scopedSlots: {customRender: 'status'}
        },
        {
          title: '上报时间',
          dataIndex: 'createDate',
        },
      ],
      list: [],
      dataLists: []
    }
  },
  components: {
    abnormal
  },
  mounted() {
    this.dataList(this.startDate, this.endDate, this.pageSize, this.pageNo)
    this.all()
  },
  methods: {
    dataList(startDate, endDate, pageSize, pageNo) {
      this.spain = true
      fabrThresholdList().then(res => {
        this.max = res.result.records[0].valMax
        pipeNetworkList().then(res => {
          this.dataLists = res.result
          this.dataLists.some((item) => {
            if (parseFloat(item.deviceValue) > this.max && this.max) {
              item.pressureUp = true
            } else {
              item.pressureUp = false
            }
          })
          console.log(this.dataLists)
          this.spain = false
        }).catch(err => {
          this.spain = false
        })
      }).catch(err => {

      })

      fabrPipeNetwork(startDate, endDate, pageSize, pageNo).then(res => {
        this.list = res.result.records
        this.total = res.result.total
        this.spain = false
      }).catch(err => {
        this.spain = false
      })

    },
    all() {
      Promise.all([pipeNetworkList, fabrPipeNetwork]).then(res => {
        this.spain = false
      }).catch(err => {
        this.spain = false
      })
    },
    thresholdBtn() {
      this.threshold = true
      fabrThresholdList().then(res => {

        this.min = res.result.records[0].valMin
        this.max = res.result.records[0].valMax
        this.id = res.result.records[0].id
      }).catch(err => {

      })
    },
    abnormalBtn() {
      this.$refs.abnormal.visible = true
      this.$refs.abnormal.dataList(10, 1)
      this.$refs.abnormal.pageNo = 1
    },
    onChange(date, dateString) {
      this.startDate = dateString[0]
      this.endDate = dateString[1]
    },
    // 搜索
    search() {
      this.dataList(this.startDate, this.endDate, this.pageSize, this.pageNo)
    },
    onShowSizeChange(current, pageSize) {
      this.dataList(this.startDate, this.endDate, pageSize, current)
    },
    thresholdOk() {
      let data = {
        valMax: this.max,
        valMin: this.min,
        id: this.id
      }
      if (this.id == '') {
        fabrThreshold(data).then(res => {
          this.$message.success('添加成功');
          this.threshold = false
        }).catch(err => {
          this.$message.error('操作失败');
        })
      } else {
        fabrThresholdEdit(data).then(res => {
          this.$message.success('修改成功');
          this.threshold = false
          this.dataList('', '', 10, 1)
        }).catch(err => {
          this.$message.error('操作失败');
        })
      }

    }
  }
}
</script>

<style scoped>
.content-top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.content-top-box {
  width: 220px;
  height: 91px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(41, 66, 153, 0.09);
  border-radius: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-left: 20px;
  box-sizing: border-box;

}

.top-right p {
  margin: 0;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #444444;
}

.top-right h3 {
  margin: 0;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #417CF2;
}

.top-right h3 span {
  color: #999999;
  font-size: 15px;
}

.top-right {
  width: 100px;
  margin-left: 10px;
}

.content-bottom {
  width: 100%;
  /*height: 831px;*/
  margin-top: 20px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);
  border-radius: 4px;
}

.active {
  background: #8590A6;
  border-color: #8590A6;
  color: #fff;
}

.red {
  color: #FA6161 !important;
}

.red span {
  color: #FA6161 !important;
}
</style>